<template>
  <div id="right-Center">
    <div class="left-Center-title">
      <div class="title-left"></div>
      <div>这里是标题</div>
    </div>
    <div class="right-Center-center">
      <div class="chartsOption">
        <dv-charts :option="optionTest" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightCenter',
  data () {
    return {
      optionTest: {}
    }
  },
  mounted () {
    this.createDat()
  },
  methods: {
    createDat () {
      this.optionTest = {
        legend: {
          data: ['已签订', '执行中', '终止'],
          top: 20,
          left: 150,
          itemGap: 40,
          iconWidth: 5,
          iconHeight: 5,
          textStyle: {
            fontSize: 12,
            fill: '#95CFEC'
          },
          icon: 'rect',
          iconStyle: {
            width: 6,
            height: 6
          }
        },

        xAxis: {
          data: ['分包', '物资', '设备', '其他'],
          axisLabel: {
            style: {
              fill: '#95CFEC',
              fontSize: 12
            }
          },
          axisLine: {
            show: true,
            style: {
              stroke: '#95CFEC',
              lineWidth: 0.5
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: '合同数量(份)',
          data: 'value',
          show: true,
          nameTextStyle: {
            fill: '#95CFEC',
            fontSize: 12
          },
          axisLine: {
            show: true,
            style: {
              stroke: '#95CFEC',
              lineWidth: 0.5
            }
          },
          axisLabel: {
            style: {
              fill: '#95CFEC',
              fontSize: 10,
              rotate: 0
            }
          },
          splitLine: {
            show: false
          }
        },

        series: [
          {
            name: '已签订',
            color: '#338AFF',
            data: [1200, 2230, 1900, 2100],
            type: 'bar',
            barStyle: {
              fill: '#338AFF'
            }
          },
          {
            name: '执行中',
            color: '#F2B849',
            data: [1200, 2230, 1900, 2100],
            type: 'bar',
            barStyle: {
              fill: '#F2B849'
            }
          },
          {
            name: '终止',
            color: '#FF5E3C',
            data: [120, 223, 190, 210],
            type: 'bar',
            barStyle: {
              fill: '#FF5E3C'
            }
          }
        ]
      }
    }
  }
}
</script>

<style  lang="less">
#right-Center {
  width: 100%;
  height: 48%;
  box-sizing: border-box;
  border: 1px solid #005ebe;
  border-radius: 7px;
  box-shadow: -1px -2px 20px -7px rgba(255, 255, 255, 0.5) inset;

  opacity: 0.76;
    background-image: linear-gradient(90deg, #0e1451 0%, #151643 100%);
    border: 1px solid #5f72c2;
    box-shadow: inset 0 0 10px 0 #556ac3;
    border-radius: 6px;
    background: #09104a;
    overflow: hidden;
  .left-Center-title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #005ebe;
    display: flex;
    flex-direction: initial;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    .title-left {
      width: 4px;
      height: 18px;
      background: rgba(67, 202, 255, 1);
      border-radius: 2px;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
  .right-Center-center {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    .chartsOption {
      width: 100%;
      // height: 230px;
      height: 100%;
    }
  }
}
</style>
